<div>
    <div resizable r-directions="['bottom']" r-height="700" >
        <div class="sidebar" ng-app="sidebar" ng-scrollbars ng-scrollbars-config="::vars.scrollConfig">
        <!--<md-input-container md-no-float class="md-block">-->
            <!--<input ng-model="vars.searchline" type="text" placeholder="Search" >-->
            <!--<md-icon class="mdi mdi-filter-remove" ng-click="vars.searchline=''" style="display:inline-block;"></md-icon>-->
        <!--</md-input-container>-->

        <fun-metis-menu ng-if="vars.loaded && !vars.error" fun-metis-config="::vars.metis.config"
                        fun-metis-events="::vars.metis.events" class="metismenu" id="sideBarMetismenu">
            <nav>
                <ul>
                    <li class="active">
                        <a class="has-arrow" >
                            <md-button class="text-left no-txt-transform w200">
                                <i class="mdi mdi-server"></i>
                                Clickhouse Server
                                <span class="pull-right" style="color: silver"></span>
                            </md-button>
                        </a>
                        <ul class="sub-menu">


                            <li ng-repeat="database in ::vars.databases  track by $index">

                                <a ng-mouseenter >
                                    <md-button class="text-left no-txt-transform w100" ng-class="currentDatabase==database.name?'activeDatabase':''" ng-dblclick="clickAndSelect(database, $event)" >
                                        <i class="mdi mdi-database"></i>
                                        {{::database.name}}
                                        <span class="db__table-count">{{::database.tables.length}}</span>
                                    </md-button>
                                </a>

                                <ul class="sub-menu">
                                    <li ng-repeat="table in ::database.tables  track by $index" >

                                        <a class="has-arrow" >
                                            <md-menu mousepoint-menu>

                                                <md-button ng-mouseenter class="text-left no-txt-transform" ng-dblclick="openTable(table)"
                                                           ng-right-click="$mdOpenMousepointMenu($event)">
                                                    <i class="mdi mdi-{{::table.classEngine}}"></i>
                                                    {{::table.name}}
                                                </md-button>

                                                <md-menu-content width="4">

                                                    <md-menu-item>
                                                        <md-button ng-click="rightMenuProcessTable('OpenTables',database.name,table.name, $event)"> <i class="mdi mdi-arrow-expand"></i>  Open table </md-button>
                                                    </md-menu-item>

                                                    <md-menu-item>
                                                        <md-button ng-click="rightMenuProcessTable('InsertDescribe',database.name,table.name, $event)"> <i class="mdi mdi-format-size"></i>  Code Select from </md-button>
                                                    </md-menu-item>

                                                    <md-menu-item>
                                                        <md-button ng-click="rightMenuProcessTable('InsertName',database.name,table.name, $event)"> <i class="mdi mdi-bing"></i>  Insert table name </md-button>
                                                    </md-menu-item>

                                                    <md-menu-item>
                                                        <md-button ng-click="rightMenuProcessTable('InsertSQLDescribe',database.name,table.name, $event)"> <i class="mdi mdi-border-vertical"></i> Make SQL Describe </md-button>
                                                    </md-menu-item>

                                                    <md-menu-item>
                                                        <md-button ng-click="rightMenuProcessTable('InsertSQLDrop',database.name,table.name, $event)"> <i class="mdi mdi-border-vertical"></i> Make SQL Drop table </md-button>
                                                    </md-menu-item>


                                                </md-menu-content>

                                            </md-menu>
                                        </a>
                                        <ul class="sub-menu">
                                            <li ng-repeat="field in ::table.fields  track by $index" class="text-left no-txt-transform table-fields-sidebar" ng-click="clickInsertField(field)">
                                                <pre style="margin: 2px 0px 0px 2px;white-space: nowrap;" class="side_fieldactive">{{::field.name}}&nbsp;&nbsp;&nbsp;&nbsp;<i style="color: silver">{{::field.type}}</i></pre>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>

                            <li>
                                <a ng-mouseenter >
                                    <md-button class="text-left no-txt-transform w100"  ng-click="updateDS()" >
                                        <i class="mdi mdi-reload"></i>
                                        Reload structure
                                    </md-button>
                                </a>

                            </li>

                        </ul>
                    </li>



                    <!--<li class="active">-->
                        <!--<a class="has-arrow" >-->
                            <!--<md-button class="text-left no-txt-transform w200">-->
                                <!--<i class="mdi mdi-server"></i>-->
                                <!--MySql Server-->
                                <!--<span class="pull-right" style="color: silver"></span>-->
                            <!--</md-button>-->
                        <!--</a>-->
                        <!--<ul class="sub-menu">-->
                            <!--<li>-->
                                <!--<a ng-mouseenter >-->
                                    <!--<md-button class="text-left no-txt-transform w100">-->
                                        <!--<i class="mdi mdi-database"></i>-->
                                        <!--Chief-->
                                        <!--<span class="db__table-count">2</span>-->
                                    <!--</md-button>-->
                                <!--</a>-->
                            <!--</li>-->
                            <!--<li>-->
                                <!--<a ng-mouseenter >-->
                                    <!--<md-button class="text-left no-txt-transform w100">-->
                                        <!--<i class="mdi mdi-database"></i>-->
                                        <!--Test-->
                                        <!--<span class="db__table-count">3</span>-->
                                    <!--</md-button>-->
                                <!--</a>-->
                            <!--</li>-->


                        <!--</ul>-->
                    <!--</li>-->




                </ul>
            </nav>
        </fun-metis-menu>


                <div ng-if="vars.loaded && vars.error" class="mt+">
                No connect, or Error or Loadind! See console log
                </div>
        </div>
    </div>


    <div  >

        <div style="padding-top: 10px" ng-if="vars.loaded && !vars.error"  ng-controller="SidebarHelperCtrl as ctrl" ng-include="'app/base/sidebarhelper.html'">

        </div>

    </div>
</div>